馬上要開始介紹 Web Audio API 了，總要有個網站來呈現各種內容吧；既然要學東西，那就順便把不熟的 Vue 架起來玩一玩囉！
筆者預期讀者您已經準備好 Node.js 及 套件管理工具 (npm / yarn)，並能理解 ES6 的語法。而 Vue 相關的語法，由於本文主軸不在這邊，且大部分不太影響閱讀，筆者不會刻意介紹。
前陣子 Vue Cli 3 推出了，增加了 UI 介面，讓不熟悉命令列的開發者可以透過 UI 勾勾選選快速建置專案，真的非常方便！不過這邊不會使用 UI 介面，而是使用傳統的 cli 指令完成
首先是安裝 Vue Cli。在安裝前，先確認你的電腦已經有安裝好 node & npm/yarn，隨後在終端機輸入：
yarn global add @vue/cli
接著是開啟專案，只要輸入：
vue create web-audio
並依著提示勾選需要的功能，這樣專案就建好囉！
來確認一下專案是否能順利啟動吧：
yarn
yarn run serve
等待服務啟動。當啟動完成時，應該會看到終端機的提示如下：
服務開在 localhost:8080，應該會看到這樣的畫面：
確認服務正確啟動後，再來簡單做一下頁面切換吧。
利用 Vue Router 的特性，導覽頁籤一下就完工囉：
做到這，也就大致完成基礎建設啦～
如果對於 Vue.js 有興趣，想要找更詳細的教學，這邊推薦我們團隊成員的 Vue 系列文章：
也可以來看看我們 浪流連九程式匠自然產生的佛系碼農專區 中，有沒有其他讀者感興趣的主題，歡迎一併訂閱追蹤喔！
第一天就先這樣，明天就要進入正題囉！
筆者
Gary
半路出家網站工程師；半生熟的前端加上一點點的後端。
喜歡音樂，喜歡學習、分享，也喜歡當個遊戲宅。相信一切安排都是最好的路。
學習時發現Vue建立頁面比想像中遇到更多障礙（囧
不知道能不能詳細解釋！
由於這系列文主要不是在介紹 Vue，就快速帶過了；能不能請您大概說明一下，具體的障礙點在哪呢～
啊，不知道該如何以VueRouter的特性製作導覽頁籤，謝謝
這部分，Vue Router 的文件 寫的蠻清楚的；需要程式碼範例的話，你也可以直接參考 我的鐵人賽專案。
要實作導覽頁籤，主要需要完成幾件事情：
router.js 中定義頁面<router-link> 連結頁面1 的部分就看你自己想做什麼內容，自行發揮你的創意。
2 的話，你需要在 router.js 中設定每一組 router 的名字、路徑與要用的 component：
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'index',
component: () => import('./views/Index.vue')
},
{
path: '/web-audio-api',
name: 'WebAudioApi',
component: () => import('./views/WebAudioApi.vue')
},
...
]
})
3 的部分，就在你想要放連結的地方加上：
<router-link to="/">Main</router-link>
<router-link to="web-audio-api">Web Audio Api</router-link>
...
這樣就完成囉，很簡單對吧～
是...我有點把他想難了。以為有用到vue-sidebar-menu製作 ！謝謝回覆！
iThome鐵人賽
看影片追技術